<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="box">
    <div class="affter">
        <span><i class="el-icon-sunrise-1"></i>
      地产列表</span>
      <el-button @click="shuaxin" class="button" type="primary" size="mini">刷新列表</el-button>
    </div>
    <div>
      <el-table :data="formDate" border style="width: 60%" :show-header="false">
        <el-table-column prop="image" label="图片" width="320">
          <template v-slot="{ row }">
            <img
            class="img"
              @click="click(row.id)"
              v-imgErr="require('@/assets/cat.webp')"
              :src="row.image"
              style="
                width: 200px;
                height: 200px;
                border-radius: 50%;
                object-fit: cover;
              "
            />
            <!-- < img :src="row.image" style="width:200px;height:200px;object-fit:cover;"> -->
          </template>
          <!-- <template v-slot{row}>
            <img
              v-imgErr="require('@/assets/cat.webp')"
              style="height: 200px; width: 200px; border-radius: 50%"
              class="img"
              :src="row.image"
              alt=""
            />
          </template> -->
        </el-table-column>
        <el-table-column prop="desc" label="介绍">
          <template v-slot="{ row }">
            <div @click="click(row.id)">
              <h2>{{ row.title }}</h2>
              <p>{{ row.desc }}</p>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页器 -->
        <el-row type="flex" justify="center">
          <el-pagination
            :page-size="limit"
            layout="prev, pager, next"
            :total="total"
            @current-change="currentChange"
          />
          </el-row>
  </div>
</template>

<script>
import { getfenleiList, getfenleiNum } from '@/api/dichanliebiao'
export default {
  data () {
    return {
      formDate: [],
      limit: 2,
      start: 0,
      total: 0
    }
  },
  created () {
    this.getfenleiList()
    this.getfenleiNum()
  },
  methods: {
    // 分页 页码发生改变时触发
    currentChange (val) {
      // console.log(val)
      this.start = (val - 1) * 2
      this.getfenleiList()
    },
    // 获取地产数量
    async getfenleiNum () {
      const res = await getfenleiNum({
        title_contains: localStorage.getItem('text')
      })
      this.total = res.data
    },
    // 获取地产列表
    async getfenleiList () {
      const res = await getfenleiList({
        _limit: this.limit,
        _start: this.start,
        title_contains: localStorage.getItem('text')
      })
      this.formDate = res.data
      // console.log(res.data);
    },
    click (id) {
      console.log(id)
      this.$router.push({name:'dichanxiangqing',params:{id}})
    },
    shuaxin () {
      localStorage.removeItem('text')
      this.getfenleiNum()
    }
  }
}
</script>

<style lang="scss" scoped>
.affter {
  margin-left: 305px;
  color: orange;
  padding: 10px 0;
  font-size: 20px;
}
.el-table {
  margin: 0 auto;
}
.img {
  margin-left: 50px;
}
.box{
  height: 600px;
}
.button{
  position: absolute;
  right: 310px;
}
</style>
